import { Table, message, Popconfirm, Space, Modal, Row, Col, Form, Input, Checkbox, Tooltip, Statistic, Card } from "antd";
import { ArrowUpOutlined, ArrowDownOutlined } from "@ant-design/icons";
import { useModel, Outlet, useLocation, history } from "umi";
import { Card as SemiCard, ButtonGroup, Button, Descriptions } from "@douyinfe/semi-ui";
import { IconRefresh, IconPlusCircle, IconDelete, IconEdit, IconEyeOpened, IconChainStroked } from "@douyinfe/semi-icons";
import { useReactive } from "ahooks";
import { useEffect, useState } from "react";
import { Column, Line } from "@ant-design/plots";

const DashboardPage = () => {
    const { windowInnerHeight } = useModel("global");

    const state = useReactive({
        tableScolleY: 292,
    });

    const loadData = () => {};

    useEffect(() => {
        loadData();
    }, []);

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <div style={{ padding: 10 }}>
            <Row gutter={16}>
                <Col span={4}>
                    <Card hoverable bordered={false}>
                        <Space size={30}>
                            <Statistic title="当日新增客户数" value={11.28} precision={2} valueStyle={{ color: "#3f8600" }} prefix={<ArrowUpOutlined />} suffix="%" />
                            <Statistic title="比上日" value={11.28} precision={2} valueStyle={{ color: "#3f8600" }} prefix={<ArrowUpOutlined />} suffix="%" />
                        </Space>
                    </Card>
                </Col>
                <Col span={4}>
                    <Card hoverable bordered={false}>
                        <Statistic title="当日裂变客户数" value={9.3} precision={2} valueStyle={{ color: "#cf1322" }} prefix={<ArrowDownOutlined />} suffix="%" />
                    </Card>
                </Col>
                <Col span={4}>
                    <Card hoverable bordered={false}>
                        <Statistic title="当日收入金额" value={9.3} precision={2} valueStyle={{ color: "#cf1322" }} prefix={<ArrowDownOutlined />} suffix="%" />
                    </Card>
                </Col>
                <Col span={4}>
                    <Card hoverable bordered={false}>
                        <Statistic title="当日订单数" value={9.3} precision={2} valueStyle={{ color: "#cf1322" }} prefix={<ArrowDownOutlined />} suffix="%" />
                    </Card>
                </Col>
                <Col span={4}>
                    <Card hoverable bordered={false}>
                        <Statistic title="当日充值金额" value={9.3} precision={2} valueStyle={{ color: "#cf1322" }} prefix={<ArrowDownOutlined />} suffix="%" />
                    </Card>
                </Col>
                <Col span={4}>
                    <Card hoverable bordered={false}>
                        <Statistic title="当日关注度" value={9.3} precision={2} valueStyle={{ color: "#cf1322" }} prefix={<ArrowDownOutlined />} suffix="%" />
                    </Card>
                </Col>
            </Row>

            <Row gutter={16} style={{ marginTop: 16 }}>
                <Col span={12}>
                    <Card hoverable bordered={false} title="品类销售额">
                        <CatetoryStatistic />
                    </Card>
                </Col>

                <Col span={12}>
                    <Card hoverable bordered={false} title="时段销售额">
                        <TimeStatistic />
                    </Card>
                </Col>
            </Row>

            <Row gutter={16} style={{ marginTop: 16 }}>
                <Col span={4}>
                    <Card
                        hoverable
                        bordered={false}
                        title="客户榜单"
                        bodyStyle={{ padding: 0 }}
                        extra={
                            <ButtonGroup>
                                <Button>日</Button>
                                <Button>周</Button>
                                <Button>月</Button>
                                <Button>年</Button>
                            </ButtonGroup>
                        }
                    >
                        <Table
                            size="small"
                            bordered
                            dataSource={[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]}
                            pagination={false}
                            scroll={{ y: state.tableScolleY }}
                            footer={() => (
                                <div style={{ textAlign: "center" }}>
                                    <a>更多...</a>
                                </div>
                            )}
                        >
                            <Table.Column title="排名" align="center" width={60} render={(_, r, i) => i + 1} />
                            <Table.Column title="客户姓名" />
                            <Table.Column title="成交金额" align="right" width={100} render={(_, r, i) => "¥ " + helper.numberFormat(500000)} />
                        </Table>
                    </Card>
                </Col>

                <Col span={4}>
                    <Card
                        hoverable
                        bordered={false}
                        title="员工榜单"
                        bodyStyle={{ padding: 0 }}
                        extra={
                            <ButtonGroup>
                                <Button>日</Button>
                                <Button>周</Button>
                                <Button>月</Button>
                                <Button>年</Button>
                            </ButtonGroup>
                        }
                    >
                        <Table
                            size="small"
                            bordered
                            dataSource={[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]}
                            pagination={false}
                            scroll={{ y: state.tableScolleY }}
                            footer={() => (
                                <div style={{ textAlign: "center" }}>
                                    <a>更多...</a>
                                </div>
                            )}
                        >
                            <Table.Column title="排名" align="center" width={60} render={(_, r, i) => i + 1} />
                            <Table.Column title="客户姓名" />
                            <Table.Column title="成交金额" align="right" width={100} render={(_, r, i) => "¥ " + helper.numberFormat(500000)} />
                        </Table>
                    </Card>
                </Col>

                <Col span={4}>
                    <Card
                        hoverable
                        bordered={false}
                        title="充值榜单"
                        bodyStyle={{ padding: 0 }}
                        extra={
                            <ButtonGroup>
                                <Button>日</Button>
                                <Button>周</Button>
                                <Button>月</Button>
                                <Button>年</Button>
                            </ButtonGroup>
                        }
                    >
                        <Table
                            size="small"
                            bordered
                            dataSource={[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]}
                            pagination={false}
                            scroll={{ y: state.tableScolleY }}
                            footer={() => (
                                <div style={{ textAlign: "center" }}>
                                    <a>更多...</a>
                                </div>
                            )}
                        >
                            <Table.Column title="排名" align="center" width={60} render={(_, r, i) => i + 1} />
                            <Table.Column title="客户姓名" />
                            <Table.Column title="成交金额" align="right" width={100} render={(_, r, i) => "¥ " + helper.numberFormat(500000)} />
                        </Table>
                    </Card>
                </Col>

                <Col span={4}>
                    <Card
                        hoverable
                        bordered={false}
                        title="套餐榜单"
                        bodyStyle={{ padding: 0 }}
                        extra={
                            <ButtonGroup>
                                <Button>日</Button>
                                <Button>周</Button>
                                <Button>月</Button>
                                <Button>年</Button>
                            </ButtonGroup>
                        }
                    >
                        <Table
                            size="small"
                            bordered
                            dataSource={[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]}
                            pagination={false}
                            scroll={{ y: state.tableScolleY }}
                            footer={() => (
                                <div style={{ textAlign: "center" }}>
                                    <a>更多...</a>
                                </div>
                            )}
                        >
                            <Table.Column title="排名" align="center" width={60} render={(_, r, i) => i + 1} />
                            <Table.Column title="客户姓名" />
                            <Table.Column title="成交金额" align="right" width={100} render={(_, r, i) => "¥ " + helper.numberFormat(500000)} />
                        </Table>
                    </Card>
                </Col>

                <Col span={4}>
                    <Card
                        hoverable
                        bordered={false}
                        title="商品榜单"
                        bodyStyle={{ padding: 0 }}
                        extra={
                            <ButtonGroup>
                                <Button>日</Button>
                                <Button>周</Button>
                                <Button>月</Button>
                                <Button>年</Button>
                            </ButtonGroup>
                        }
                    >
                        <Table
                            size="small"
                            bordered
                            dataSource={[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]}
                            pagination={false}
                            scroll={{ y: state.tableScolleY }}
                            footer={() => (
                                <div style={{ textAlign: "center" }}>
                                    <a>更多...</a>
                                </div>
                            )}
                        >
                            <Table.Column title="排名" align="center" width={60} render={(_, r, i) => i + 1} />
                            <Table.Column title="客户姓名" />
                            <Table.Column title="成交金额" align="right" width={100} render={(_, r, i) => "¥ " + helper.numberFormat(500000)} />
                        </Table>
                    </Card>
                </Col>

                <Col span={4}>
                    <Card
                        hoverable
                        bordered={false}
                        title="服务榜单"
                        bodyStyle={{ padding: 0 }}
                        extra={
                            <ButtonGroup>
                                <Button>日</Button>
                                <Button>周</Button>
                                <Button>月</Button>
                                <Button>年</Button>
                            </ButtonGroup>
                        }
                    >
                        <Table
                            size="small"
                            bordered
                            dataSource={[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]}
                            pagination={false}
                            scroll={{ y: state.tableScolleY }}
                            footer={() => (
                                <div style={{ textAlign: "center" }}>
                                    <div style={{ textAlign: "center" }}>
                                        <a>更多...</a>
                                    </div>
                                </div>
                            )}
                        >
                            <Table.Column title="排名" align="center" width={60} render={(_, r, i) => i + 1} />
                            <Table.Column title="客户姓名" />
                            <Table.Column title="成交金额" align="right" width={100} render={(_, r, i) => "¥ " + helper.numberFormat(500000)} />
                        </Table>
                    </Card>
                </Col>
            </Row>

            {/* <SemiCard
                title={<span style={{ lineHeight: "32px", fontSize: 15 }}>商城概览</span>} ¥
                headerStyle={{ padding: "10px 14px" }}
                shadows="always"
                bordered={false}
                size="default"
                bodyStyle={{ padding: 30, height: cardBodyHeight, overflow: "auto" }}
                headerExtraContent={<ButtonGroup></ButtonGroup>}
            >
                <div>支持数据展示和图表显示 </div>
                <div> 订单：本年订单 本月订单 本周订单 本日订单（数量，总额）。折线或者柱状图，订单趋势：按月，按周，按日。同比，环比</div>
                <div>小程序售卖物品分布：包含品类数（每个品类包含的商品数量（及销量）、服务数量（及销量）），优惠套餐的售卖数及销量，支持年、月、周、日的维度</div>
                <div>排名：商品销量的排名，服务销量的排名，优惠套餐销量的排名，支持年、月、周、日的维度</div>
                <div>当前的充值方案：显示充值方案里面每个明细的充值次数，充值总金额，支持以年、月、周、日的维度显示折线图或柱状图，环比同比充值金额 </div>
                <div>客户：客户充值排名，客户消费排名，客户拓客排名</div>
                <div>门店：门店充值排名，门店订单数排名，门店订单额排名，门店销售的商品、服务、优惠套餐分别进行多条件维度排名</div>
                <div>员工：员工拓客排名，员工关联的订单数排名，员工关联的订单额排名，员工销售的商品、服务、优惠套餐分别进行多条件维度排名</div>

                <p>指标： 当日新增客户数、当日裂变客户数、当日收入金额、当日订单数、当日充值金额、当日关注度</p>

                <p>列表： 客户榜、员工榜、充值榜、门店榜、商品榜、服务榜</p>
            </SemiCard> */}
        </div>
    );
};

const CatetoryStatistic = () => {
    const data = [
        { type: "家具家电", sales: 38 },
        { type: "粮油副食", sales: 52 },
        { type: "生鲜水果", sales: 61 },
        { type: "美容洗护", sales: 145 },
        { type: "母婴用品", sales: 48 },
        { type: "进口食品", sales: 38 },
        { type: "食品饮料", sales: 38 },
        { type: "家庭清洁", sales: 38 },
    ];

    const config = {
        data,
        xField: "type",
        yField: "sales",
        label: {
            // 可手动配置 label 数据标签位置
            position: "middle",
            // 'top', 'bottom', 'middle',
            // 配置样式
            style: { fill: "#FFFFFF", opacity: 0.6 },
        },
        xAxis: { label: { autoHide: true, autoRotate: false } },
        meta: { type: { alias: "类别" }, sales: { alias: "销售额" } },
        height: 240,
    };

    return <Column {...config} />;
};

const TimeStatistic = () => {
    const data = [
        { type: "家具家电", sales: 38 },
        { type: "粮油副食", sales: 52 },
        { type: "生鲜水果", sales: 61 },
        { type: "美容洗护", sales: 145 },
        { type: "母婴用品", sales: 48 },
        { type: "进口食品", sales: 38 },
        { type: "食品饮料", sales: 38 },
        { type: "家庭清洁", sales: 38 },
    ];

    const config = {
        data,
        xField: "type",
        yField: "sales",
        label: {
            // 可手动配置 label 数据标签位置
            position: "middle",
            // 'top', 'bottom', 'middle',
            // 配置样式
            style: { fill: "#FFFFFF", opacity: 0.6 },
        },
        xAxis: { label: { autoHide: true, autoRotate: false } },
        meta: { type: { alias: "时段" }, sales: { alias: "销售额" } },
        height: 240,
        point: {
            size: 5,
            shape: "diamond",
            style: {
                fill: "white",
                stroke: "#5B8FF9",
                lineWidth: 2,
            },
        },
    };

    return <Line {...config} />;
};

export default DashboardPage;
